<template>
  <div class="content">
    <div class="top_filter">
      <div class="top_filter_col">
        <div class="block">
          <span class="top_filter_col_tit ">收付日期</span>
          <el-date-picker
            v-model="searchFrom.transactionDate1"
            type="datetimerange"
            value-format="yyyy-MM-dd"
            format="yyyy-MM-dd"
            :picker-options="pickerOptions"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            align="right">
          </el-date-picker>
        </div>
      </div>
      <div class="top_filter_col">
        <span class="top_filter_col_tit">类型</span>
        <el-select v-model="searchFrom.dtype" placeholder="请选择">
          <el-option label="不限" value=""></el-option>
          <el-option label="收入" value="收入"></el-option>
          <el-option label="支出" value="支出"></el-option>
          <el-option label="转移" value="转移"></el-option>
          <el-option label="应收款" value="应收款"></el-option>
          <el-option label="应付款" value="应付款"></el-option>
        </el-select>
      </div>
      <div class="top_filter_col">
				<span class="top_filter_col_tit">
					<el-button class="el-icon-search" size="small" type="success" @click="searchFun()">搜索</el-button>
          <!-- <el-button  class="" size="small" type="primary" @click="download()">axios导出Excel</el-button> -->
				</span>
      </div>

    </div>
    <el-table :data="tableData" border="1">
      <el-table-column align="center" prop="dtype" label="类型">
        <template slot-scope="scope">
          <span class="btn" style="background: #67C23A;" v-if="scope.row.dtype=='收入'">收入</span>
          <span class="btn" style="background: #409EFF;" v-if="scope.row.dtype=='支出'">支出</span>
          <span class="btn" style="background: #a6b1bb;" v-if="scope.row.dtype=='转移'">转移</span>
          <span class="btn" style="background: #82b6ec;" v-if="scope.row.dtype=='应收款'">应收款</span>
          <span class="btn" style="background: #436e9a;" v-if="scope.row.dtype=='应付款'">应付款</span>
        </template>
      </el-table-column>
      <el-table-column label="交易时间" align="center" prop="transactionDate">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.transactionDate, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="资金账户" align="center" prop="ofAccount">
        <template slot-scope="scope">
          <div v-for="itme in accountList" >
                        <span v-if="itme.aid==scope.row.ofAccount">
                          {{itme.aname}}
                        </span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="交易原因" align="center" prop="ofReason">
        <template slot-scope="scope">
          <div v-for="itme in reasonList" >
            <span v-if="scope.row.ofReason==itme.rid">{{itme.rname}}</span>
          </div>
          <span v-if="scope.row.dtype=='转移'">移转</span>
        </template>
      </el-table-column>
      <el-table-column label="交易金额" align="center" prop="money" />
      <el-table-column label="对象" align="center" prop="object">
        <template slot-scope="scope" v-for="itme in ObjList">
          <span v-if="scope.row.object==String(itme.objId)">{{itme.objName}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="" label="币种">
        <template slot-scope="scope">
          <span v-for="itme in currencyList" v-if="scope.row.ofCurrency==itme.cid">
            {{itme.cnName}}({{itme.enName}})
          </span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="附注说明" prop="comment"/>
      <el-table-column align="center" label="标签" prop="tag" width="120px">
        <template slot-scope="scope">
          <span v-for="itme in labelList">
            <span v-for="itme1 in scope.row.tag" v-if="itme1==itme.labelId"><el-tag type="info">{{itme.labelName}}</el-tag> </span>
          </span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="营业税" prop="tax"/>
      <el-table-column align="center" label="发票号码" prop="invoice"/>
      <el-table-column align="center" label="附件">
        <template slot-scope="scope">
          <a  target="_blank" v-if="scope.row.attachment!=0 && scope.row.attachment!=null"  :href="url+scope.row.attachment">
            <el-button type="primary" size="mini" >查看</el-button>
          </a>
          <a  target="_blank" v-if="scope.row.attachment!=0 && scope.row.attachment!=null">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="handleDownload(scope.row)"
            >下载</el-button>
          </a>
        </template>
      </el-table-column>
      <el-table-column width="200px" fixed="right" align="center" label="功能">
        <template slot-scope="scope">
          <el-button size="mini" type="success" @click="recover(scope.row.tid)" >恢复</el-button>
          <el-button size="mini" type="danger" @click="del(scope.row.tid)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination_box">
      <pagination
        v-show="total>0"
        :total="total"
        :page-sizes="[7, 14, 28, 56]"
        :page-size="7"
        :page.sync="searchFrom.pageNum"
        :limit.sync="searchFrom.pageSize"
        @pagination="getData"
      />
    </div>


    <!-- 修改项目弹出层 -->
    <el-dialog title="修改" :visible.sync="showEdit" width="600px">
      <el-form :model="editFrom">
        <el-form-item label="收付日期" :label-width="formLabelWidth">
          <el-date-picker
            v-model="editFrom.transactionDate">
            type="date"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="凭证日期" :label-width="formLabelWidth">
          <el-date-picker
            v-model="editFrom.proofDate">
            type="date"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="附注说明" :label-width="formLabelWidth">
          <el-input v-model="editFrom.comment" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="对象" :label-width="formLabelWidth">
          <el-input v-model="editFrom.object" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="标签" :label-width="formLabelWidth">
          <el-select v-model="editFrom.tag" autocomplete="off">
            <el-option v-for="itme in labelList" :value="itme.labelId" :label="itme.labelName" :key="itme.labelId"/>
          </el-select>
        </el-form-item>
        <el-form-item label="发票号码" :label-width="formLabelWidth">
          <el-input v-model="editFrom.invoice" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="ShowDlogForm = false">取 消</el-button>
        <el-button type="primary" @click="edit()">确 定</el-button>
      </div>
    </el-dialog>

  </div>


</template>

<script>
  import axios from "axios"
  import {ListTransactionDetail,updateTransactionDetail,delTransactionDetail} from '@/api/system/transactionDetail';
  import {addIncome,listIncome} from '@/api/system/income';
  import {addDisbures,listDisbures} from '@/api/system/disbures';
  import {addTransfer,listTransfer} from '@/api/system/transfer';
  import {listAccount,income} from '@/api/system/account'
  import {listCurrency} from '@/api/system/currency';
  import {listBalance,addBalance,updateBalance,getBalance} from '@/api/system/balance';
  import {listReason} from '@/api/system/reason';
  import { getInfo } from "@/api/login";
  import { listObj } from "@/api/system/obj";
  import { listLabel } from "@/api/system/label";
  export default {
    data() {
      return {
        url:process.env.VUE_APP_BASE_API,
        incomeList:[],
        disburesList:[],
        transferList:[],
        balanceList:[],
        currencyList: [], //币种列表
        reasonSrList: [], //原因列表
        reasonZcList: [], //原因列表
        accountList:[],
        showEdit:false,
        formLabelWidth:"80px",
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        editFrom:{
          transactionDate:'',
          proofDate:'',
          money:'',
          comment:'',
          object:'',
          tag:'',
          invoice:''
        },
        downloadHerf:"http://localhost:8080/transactionDetailRest/export",
        dealData: '',
        vouData: '',
        dealOn: 0,
        vouOn: 0,
        tableData: [],
        page: 1,
        pagesize: 10,
        total: 0,
        accountOptions:[{
          dtype: '现金',
          options: []
        }, {
          dtype: '银行卡',
          options: []
        }, {
          dtype: '信用卡',
          options: []
        }],
        searchFrom: {
          pageNum: 1, // 条数
          pageSize: 7, // 页数
        },
        reasonList:[],//原因选中列表
        ObjList:[],
        labelList:[],
      }
    },
    // watch:{
    // 	searchFrom(val){
    // 		downloadHerf+=JSON.stringify(val)
    // 	}
    // },
    created() {
      this.getData()
    },
    methods: {
      getData() {
        let that = this
        this.accountOptions = [{
          atype: '现金',
          options: []
        }, {
          atype: '银行卡',
          options: []
        }, {
          atype: '信用卡',
          options: []
        }]
        let account = {};
        getInfo().then(data=>{
          account.ofCompany=data.tuser.ofCompany;
          account.atype = "现金";
          listAccount(account).then(date => {
            this.accountOptions[0].options = date.rows;
          })
          account.atype = "银行存款";
          listAccount(account).then(date => {
            this.accountOptions[1].options = date.rows;
          })
          account.atype = "信用卡";
          listAccount(account).then(date => {
            this.accountOptions[2].options = date.rows;
          })
          listAccount({ofCompany:data.tuser.ofCompany}).then(date => {
            this.accountList = date.rows;
          })

          listCurrency().then(date => {
            this.currencyList = date.rows;
          })
          listReason({parent: "-1", rtype: "收入"}).then(date => {
            this.reasonSrList = date.rows;
          })
          listReason({parent: "-1", rtype: "支出"}).then(date => {
            this.reasonZcList = date.rows;
          })
          listReason().then(date => {
            this.reasonList = date.rows;
          })
          let obj={};
          obj.objCompany=data.tuser.ofCompany;
          listObj(obj).then(date=>{
            this.ObjList=date.rows;
          })
          let label={};
          label.labelCompany=data.tuser.ofCompany;
          listLabel(label).then(date=>{
            this.labelList=date.rows;
          })
          this.searchFrom.deleted = 1;
          this.searchFrom.ofCompany=data.tuser.ofCompany;
          ListTransactionDetail(this.searchFrom).then(res => {
            if (res.code == 200) {
              that.tableData = res.rows
              that.total = res.total
            }
          })
        })
      },
      //弹出项目修改
      showEditPop(row){
        console.log(row);
        this.editFrom=row
        this.showEdit=true
      },
      //修改
      edit() {
        let that = this
        this.$service.transactionDetail.edit(this.editFrom).then(res => {
          if (res.state == 1) {
            that.getData()
            that.$notify({
              title: '修改成功',
              type: 'success'
            });
          }
          that.showEdit = false
        })
      },
      //删除
      del(id) {
        let that = this
        this.$confirm('确认彻底删除，删除后将不能恢复？').then(_ => {
          delTransactionDetail(id).then(res => {
            if (res.code == 200) {
              that.getData()
              that.$notify({
                title: '删除成功',
                type: 'success'
              });
            }
          })
          done();
        })
          .catch(_ => {});
      },
      handleSizeChange() {

      },
      handleCurrentChange() {},
      searchFun() {
        this.searchFrom.deleted=1;
        ListTransactionDetail(this.searchFrom).then(data=>{
          this.tableData=data.rows;
        });
      },
      recover(row){
        let tr={};
        tr.tid=row;
        tr.deleted=0;
        updateTransactionDetail(tr).then(date=>{
          this.getData()
          this.$notify({
            title: '恢复成功',
            type: 'success'
          });
        })
      },
      // 文件下载处理
      handleDownload(row) {
        this.download('/common/download/resource?resource=' + encodeURI(row.attachment), {
          ...this.queryParams
        }, row.attachment)
      }
    }
  }
</script>

<style lang="scss">
  .pagination_box {
    height: 60px;
    width: 100%;
    background-color: #fff;
  }

  .btn {
    padding: 4px 8px;
    color: white;
    border-radius: 4px;
  }

  .top_filter {
    font-size: 15px;
    padding: 10px 20px;
    background-color: #fff;
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;

    &_col {
      padding: 4px 0;
      display: flex;
      flex-direction: row;
      align-items: center;
      margin-right: 10px;

      &_tit {
        white-space: nowrap;
        margin: 8px;
      }
    }
  }
</style>
